import React, { useContext } from "react";
import styles from "./Robot.module.css";
import { appContext, appSetStateContext } from "../AppState"; // 引入上下文对象
import { withAddToCart } from "./AddToCart";

// 定义要传进来的数据
export interface RobotProps {
  id: number;
  name: string;
  email: string;
  addToCart: (id: number, name: string) => void;
}

// FC  = functional component 函数式组件的缩写
//type React.FC<p = {}> = React.FuntionComponent<P> 泛型参数p = props
const Robot: React.FC<RobotProps> = ({ id, email, name, addToCart }) => {
  // return (
  //   <appContext.Consumer>
  //     {/* 消费者监听值 */}
  //     {(value) => {
  //       return (
  //         <div className={styles.cardContainer}>
  //           <img src={`https://robohash.org/${id}`} alt="robot" />
  //           <h2>{name}</h2>
  //           <p>{email}</p>
  //           <p>作者:{value.username}</p>
  //         </div>
  //       );
  //     }}
  //   </appContext.Consumer>
  // );
  // 使用useContext可以减少代码量
  const value = useContext(appContext);
  const setState = useContext(appSetStateContext);
  // !改为高阶组件
  // const addToCart = () => {
  //   console.log('点击了',id, name);

  //   if (setState) {
  //     // 存在undefined
  //     console.log('点击了setState',id, name);

  //     setState((state:any) => {
  //       return {
  //         ...state,
  //         shoppingCart: {
  //           items: [...state.shoppingCart.items, { id, name }],
  //         },
  //       };
  //     });
  //   }
  // };

  return (
    <div className={styles.cardContainer}>
      <img src={`https://robohash.org/${id}`} alt="robot" />
      <h2>{name}</h2>
      <p>{email}</p>
      <p>作者:{value.username}</p>
      <button
        onClick={() => {
          addToCart(id, name);
        }}
      >
        加入购物车
      </button>
    </div>
  );
};

export default withAddToCart(Robot);
